<template>
  <div style="padding-right: 30px;padding-top:30px">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-tree
          :data="data"
          :props="defaultProps"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
        >
        </el-tree>
      </el-col>

    </el-row>
    <el-row :gutter="10" style="margin-top:30px">
      <el-col :span="6" :offset="6">
        <el-button type="primary" @click="save">保存</el-button>
      </el-col>
      <el-col :span="12">
        <el-button @click="cancel">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {addShipmentLineArea} from "@/api/shipment";
  import request from '@/utils/request'
  export default {
    name: "Edit",
    data() {
      return {
        // data: [],
        data: [{
                    name: '全部',
                    code:'',
                    children: []
                }],
        defaultProps: {
          id: 'code',
          label: 'name'
        },
        form: {
          lineCode: '',
          areaCode: ''
        },
        checkedNodes: []
      };
    },
    methods: {
      getInfo(lineCode, shipmentUserCode) {
        this.form.areaCode = '';
        this.form.lineCode = lineCode;
        request({
          url: `/ntocc-basic-api/distributionArea/queryLineAreaList`,
          method: 'get',
          params: {lineCode: lineCode, shipmentUserCode: shipmentUserCode}
        }).then(response => {
          this.data[0].children = response.data;  
        })
      },
      save() {
        this.checkedNodes = this.$refs.tree.getCheckedNodes();
        if (this.checkedNodes.length === 0) {
          this.$message({message: "请选择区域", type: 'warning'});
        } else {
          let that = this;
          this.checkedNodes.forEach(function (node) {
            that.form.areaCode = that.form.areaCode + ',' + node.code;
          })
          addShipmentLineArea(this.form).then(response => {
            this.$message({message: response.msg, type: 'success'})
            this.$emit('hideModel')
          })
        }
      },
      cancel() {
        this.$emit('hideModel');
      }
    }
  };
</script>
